色温往暖推400K，那块酱排骨才像刚出锅

一家做无锡本帮菜的馆子来谈网站建设，老板递过来的素材是手机相册里两百多张照片：包厢吊灯下的一片黄、俯拍时手机边框投下的影子、吃了一半的盘子。逐张挑完，能上线的不到十张。菜品图这一关不过，后面的排版、动效、关键词布局做得再细，页面打开的那一秒依然是「不想点」。

前置条件：这几样没备齐，先别动排版

菜品清单先分三级：主推 8 到 12 道，用于首屏和菜单页顶部；常规 30 到 50 道，走列表小图；季节限定 5 到 8 道，单独开一块。分级直接决定哪些菜要单拍特写、哪些用一张整盘图就够，也决定拍摄那天的出菜顺序，不分级就会出现厨房忙了一天、主推菜反而拍在最后光线最差的时段。

拍摄硬件：一支色温恒定的补光灯（不用闪光灯）、一块白色反光板、三块背景板（哑光木纹、深灰石纹、亚麻布各一）。店里原有的吊灯不能当主光源，餐饮门店的暖黄射灯显色指数普遍偏低，拍出来的青菜会蒙一层灰绿，后期再调也回不来。

资料清单：品牌主色的十六进制值、字体的商用授权凭证、门店地址与营业时间、订座电话或小程序链接、食品经营许可证编号。最后一项最常被漏，等到网站建设收尾要往页脚挂许可证时再回头找，通常要卡两三天。

验收设备额外备一台三年前的中低端安卓手机。餐饮站的访客有相当比例是在路上、在电梯里、在门口等位时打开页面的，网络和机器都不理想，只用开发机验收会漏掉大半问题。

第一步 拍摄：热菜的窗口只有 90 秒

主光放在菜品斜后方，与镜头夹角 120 度上下，让蒸汽、油光和酱汁的高光连成一条亮边。正面平打的光会把菜拍得没有厚度，看上去像橱窗里的样品。前方用反光板补一点暗部，提到能看清食材纹理就停，补平了立体感也就没了。

参数上，光圈 f/4 到 f/5.6，保证从主体到盘沿都在焦内；感光度压在 800 以内；快门不低于 1/125 防手抖。热菜从出锅到拍完控制在 90 秒内，超过两分钟，红烧类的油脂开始凝固、表面转暗，汤汁失去流动感，这种状态后期救不回来。

每道主推菜至少两张：一张 45 度角的整盘，一张贴近的细节。无锡酱排骨要抓酱汁挂在骨头上将滴未滴的那一下，脆鳝要拍断面，小笼要拍夹起来皮被汤汁撑得发亮的瞬间。从后台点击数据看，详情页里细节图的放大查看次数通常高于整盘图。

校验方法：当天把样片缩到宽 320 像素——这就是手机列表页的实际显示尺寸——隔一米远看，还能不能一眼认出是什么菜。认不出来，说明主体在画面里占比太小，机位往前推再拍一组。

第二步 调色：暖 400K 是那条分界线

后期第一动作是白平衡。色温滑块从相机记录值往暖侧推 300 到 500K，色调往品红方向 +3 到 +5，作用是把食物从「冷藏柜」的观感里拽出来。推过头也有明显信号：白瓷盘沿开始泛黄，就说明超了，退回 100K。

接着压高光 -15 到 -25。无锡菜的酱汁含糖量高、反光强，不压高光，排骨表面会糊成一片死白，纹理全部丢失。阴影提 +10 到 +20，让盘子背光那一侧还能分辨出食材层次。

饱和度不要整体拉。用色相分离工具分别处理：橙色与红色 +8 到 +12，对应肉类、酱汁和油光；绿色反而要 -5 到 -8，配菜的青菜一旦饱和度上去就发荧光，假得刺眼；蓝色一律不动。整体饱和度 +30 是最常见的翻车动作，成品像塑料模型。

校验方法：把成片临时转成灰度看一眼，主体与背景的明度差要能一眼分开，大约 20% 到 30%。灰度下分不开的图，彩色状态也只是靠颜色硬撑，缩小到列表尺寸就糊成一团。

第三步 裁切导出：画幅必须收敛

列表页统一 4:3 或 1:1，详情页统一 3:2，全站不要出现三种以上比例。主体在画面中占 60% 到 75%，四周留白均匀，别为了追求意境把菜推到角落——那是杂志的用法，搬到网页上缩小后只剩一片空白。

导出两套文件：列表缩略图长边 800 像素，详情图长边 1600 像素，质量 80，色彩空间必须是 sRGB。同时把这次的调色参数存成预设，之后补拍新菜直接套用。这是餐饮类网站建设中保证整站风格统一的关键动作，比事后一张张对着眼睛调省下十倍时间。

校验方法：把全部列表图缩成九宫格并排看。只要有一张的色调、亮度或背景明显跳出来，退回上一步重调，不要留到上线之后再收拾。

第四步 页面排布：背景色决定食物脏不脏

首屏放一张主推菜的大图、一句话、一个订座按钮，不要上轮播。餐饮站首页的平均停留常在 30 到 45 秒，六屏轮播走完一轮就要 30 秒，后面几屏基本没人看见。

菜单页每屏排 4 到 6 个菜品卡，卡片间距 16 到 24 像素。整页背景用低饱和暖白，比如 #FAF7F2 这一类：纯白会让菜品图边缘的暖调显得发脏，纯深灰又会压掉食物的亮度，深色背景只在夜宴、居酒屋这种调性下才成立。

校验方法：眯起眼睛看整屏，视线第一落点应该在菜品图上。要是先看到导航条或者促销角标，说明图的面积不够或者对比度被角标抢走了。

第五步 文案：每道菜挂一句具体的话

菜名下面配 12 到 20 字的描述，只写三类信息：食材来源、做法时长、口感状态。像「猪肋排砂锅焖足三小时，收汁到能挂住筷子」「太湖白虾清水汆二十秒，壳软肉甜」这种。精选食材、匠心手作、唇齿留香这些词在每一家同行页面上都有，读者的眼睛会自动跳过去。

校验方法：把这句描述单独抽出来，换成隔壁任何一家馆子也照样成立，那它就是废话，重写。

第六步 性能：2.5 秒是分水岭

图片优先输出 WebP 并保留一份 JPEG 兜底。列表页首屏 6 张预加载，其余全部懒加载。单张列表图压到 80 到 150KB，首屏图片总体积控制在 1.2MB 以内。餐饮站的网站建设预算里，图片加载这一块比动效更值得投入。

校验方法：浏览器开发者工具的网络面板把网速节流到 4G，硬刷新，看首屏菜品图能否在 2.5 秒内可见。南长街、清名桥一带的店尤其要测，那里很大一部分流量来自游客站在街上现搜，超过 3 秒还是白屏，人就转去看点评软件了。

第七步 转化入口：拇指够得到才算数

手机端底部吸一条操作栏，放电话、在线订座、导航三个按钮，高度 48 到 56 像素，可点击区域不小于 44 像素见方。导航按钮直接唤起地图应用并带上门店坐标，不要只摆一行地址文字让人自己复制。

校验方法：单手握持手机，拇指自然弯曲能不能覆盖到这三个按钮。够不到就把吸底栏整体下移或者加高，不要指望用户换手。

常见报错与处理

图在电脑上通透、发到手机上发灰：导出时色彩空间选成了 Adobe RGB 或 ProPhoto，改回 sRGB 重新导出即可。

高分屏上菜品图发虚：只提供了一倍图，没给 srcset 的二倍图源，屏幕放大后必然糊。列表图按 800 像素长边出，二倍位置补一份 1600 像素。

后台上传完图片变模糊：内容管理系统默认的二次压缩质量通常在 60 上下，把它调到 82，或者上传前压好并关闭后台自动压缩。

手机端图片被拉变形、加载时页面跳动：容器要写死宽高比，图片用 object-fit: cover 填充，否则图片加载完成那一瞬会把下方内容顶走。

不同批次拍的菜风格对不上：多半是没沿用同一套调色预设，或者第二次拍摄换了背景板。补拍前先翻出上一批的原片、预设和背景板，一起复原再开机。

单张原片超过 2MB 上传失败：先批量压到 2MB 以内，同时检查服务器的上传限制。餐饮站后期换季补菜频繁，这个限制值最好在网站建设阶段就一次调到 8MB 以上，省得每次都找技术。

上线前自查

主推菜是否每道都有整盘图与细节图各一张；全站图片比例是否收敛到两三种以内；列表图拼成九宫格有无明显跳色；白瓷盘沿有没有泛黄；配菜青菜有没有发荧光；单张列表图是否都在 150KB 以内；4G 节流下首屏图片是否 2.5 秒内出现；每道菜的描述句换到别家是否还成立；吸底三个按钮拇指能否够到；导航按钮能否唤起地图应用；食品经营许可证编号是否已挂在页脚；调色预设与原片是否已归档交给店家。